<!DOCTYPE html>
<html>
<head>
    <title>Draw Arc</title>
</head>
<body>
    <canvas id="canvas" height="600" width="800">Your browser not support Canvas!</canvas>
<script type="text/javascript">
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var x=300;
    var y=300;
    var r=100;
//    ctx.moveTo(x-r,y);
//    for(var i=x-r;i<x+r+1;i++){
//        var tempY = Math.pow(r*r - (x-i)*(x-i),1/2);
//        ctx.lineTo(i,y+tempY);
//    }
//    ctx.moveTo(x-r,y);
//    for(var i=x-r;i<x+r+1;i++){
//        var tempY = Math.pow(r*r - (x-i)*(x-i),1/2);
//        ctx.lineTo(i,y-tempY);
//    }
//    ctx.stroke();

        var flag = 1;
        var i=x-r;
        var j=x+r;
        ctx.moveTo(x-r,y);
        var s1 = setInterval(function(){
            //console.log("i:"+i);
            var tempY = Math.pow(r*r - (x-i)*(x-i),1/2);
            ctx.lineTo(i,y+tempY);
            ctx.stroke();
            i++;
            if(i>x+r){
                flag=2;
            }

            if(flag == 2){
                var tempY = Math.pow(r*r - (x-j)*(x-j),1/2);
                ctx.lineTo(j,y-tempY);
                ctx.stroke();
                j--;
                if(j<x-r){
                    clearInterval(s1);
                }
            }
        },10);
</script>
</body>
</html>